<template>
	<view class="u-wrap wrap">
		
		<!-- 轮播图 -->
		<!-- 暂时不要这个轮播图 -->
		<!-- <view class="">
			<u-swiper :list="swiperList" height="300"  :autoplay="true" 
				indicator indicatorMode="line" name="img_url"></u-swiper>
		</view> -->
		
		<!-- 头部区域(固定不动) -->
		<view class="top-area">
			<!-- 搜索栏 => 这个应该固定在头部 -->
			<view class="u-search-box u-m-t-20 top-search" @click="clickSearch">
				<u-search placeholder="搜索信息" v-model="keyword"></u-search>
			</view>
			
			<!-- 导航栏(暂时不要) -->
			<!-- <view class="nav u-text-center u-m-t-20 top-nav">
				<u-tabs :list="navList" :current="currentIndex" bar-width="100" item-width="160" @change="navChange">
				</u-tabs>
			</view> -->
		</view>
		
		<view class="content">	
			<!-- 帖子的具体内容区域 -->
			<view class="todos">
				<!-- 帖子 -->
				<card v-for="todoData in tableList" :todoData="todoData"></card>
				<!-- 分页 -->
				<uni-pagination style="margin-top: 15rpx; font-size: 15rpx;"
				:total="total" @change="paginationChange"></uni-pagination>
			</view>
		</view>
		
		<!-- 设置返回顶部 -->
		<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
	</view>
</template>

<script>
	import {mapGetters, mapMutations} from 'vuex'
	import uniPagination from "../../components/uni-pagination/uni-pagination.vue"
	import {APIGetAllTODO} from '../../config/api.js';
	
	export default {
		components: {
		    uniPagination
		}, 
		// 初始化数据
		data() {
			return {
				// 分页组件相关数据
				total: 0,			// 数据总条数
				index: 10,			// 每页多少条
				tableList: [],		// 显示出来的数据
				totalList: [],		// 所有数据
				todoData: {			// 传入子组件的帖子数据
				},
				flag: false,
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				], // 轮播图列表
				keyword: '', 	// 搜索信息关键字
				navList: [		// 导航栏数据
				{
					name: '默认'
				}, 
				{
					name: '最热'
				}, 
				{
					name: '推荐'
				}, 
				{
					name: '最新'
				}],
				
				// 返回顶部的设置
				scrollTop: 0,
				mode: 'square',
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				}
			}
		},
		computed: {
			...mapGetters(['token', 'user']),
		},
		onLoad() {
			// 查询所有帖子
			APIGetAllTODO().then(res => {
				console.log(res);
				// 获取所有数据和总数据条数
				this.totalList = res.data
				this.total = this.totalList.length
				if (this.total < 10){
					// 如果数据条数小于10 那么index也小于10(第一页显示index个)
					this.index = this.total
				}
				for (let i = 0; i < this.index; i++){
					// 把第一页的数据给tableList
					this.tableList[i] = this.totalList[i]
				}
			}).catch(err => {
				console.log(err);
			})
			
			
		},
		// uniapp的页面监听滚动 -> 给返回顶部的设置提供数据
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 分页核心逻辑
			paginationChange(e) {
				// 当前页的最后索引
				this.index = e.current * 10
				// 清空tableList
				this.tableList.splice(0, this.tableList.length)
				if (this.index > this.totalList.length) {
					// 当前到了最后一页（最后一页不是满的）
					for (let i = this.index - 10, j = 0; i < this.totalList.length; i++)
						this.tableList[j++] = this.totalList[i]
				} else {
					// 非最后一页 后面还有数据
					for (let i = this.index - 10, j = 0; i < this.index; i++)
						this.tableList[j++] = this.totalList[i]
				}
			},
			
			// 当用户点击了搜索 
			clickSearch(){
				this.$u.toast("搜索功能未实现")
			},
			
		}
	}
</script>


<style lang="scss" scoped>
	.wrap {
		// height: 200vh;
		display: flex;
		flex-direction: column;
			
		.top-area{
			padding-top: 85rpx;
			width: 100%;
			text-align: center;
			
			background-color: rgb(234, 234, 234);
			color: #fff;
			position: fixed;
			top: 0;
			z-index: 9;
			
			.top-search{
				padding: 20rpx 0;
			}
		}
		
		.content{
			margin-top: 105rpx;
			padding-bottom: 300rpx;
			
			.todos{
				padding-bottom: 150rpx;
			}
		}
		
	}
</style>